/* status */
<template xlang="wxml">
  <div class="status">
    <van-row gutter="10">
      <van-col span="8" custom-class="v-col" v-for="(item,index) in list" :key="index">
        <View class="v-col" :class="item.class">
          <p>{{item.name}}</p>
          <p>{{item.num}}</p>
        </View>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
 
  data: () => ({
    list: [
      { name: "设备总数", num: 24, class: "primary" },
      { name: "在线设备数", num: 12, class: "warning" },
      { name: "故障设备数", num: 12, class: "error" }
    ]
  }),
  methods: {},
  computed: {},
  watch: {}
};
</script>

<style lang="less" scoped>
.status {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 20px;
  .v-col {
    border-radius: 10px;

    p {
      line-height: 35px;
      color: #fff;
      &:nth-child(1) {
        font-size: 12px;
      }
      &:nth-child(2) {
        font-size: 16px;
        font-weight: 700;
      }
    }
  }
}
</style>